<template>
	<view class="msgBtn">
		<form @submit="formSubmit" v-if="(!success)&&(!fail)">
			<label>
				<text>验证码</text>
				<input class="uni-input checkInput" name="msgCode" placeholder="填写短信验证码" />
			</label>
			<button type="primary" form-type="submit" class="loginBtn">立即绑定</button>
		</form>
		<view class="fail setIcon" v-if="fail">
			<image src="../static/shibai.png"></image>
			<text>{{errMsg}}</text>
			<button class="loginBtn" @click="bindFailed"> 返回</button>
		</view>

		<view class="success setIcon" v-if=" success">
			<image src="../static/success.png"></image>
			<text>账号绑定成功！</text>
			<button class="loginBtn" @click="bindSuccess"> 完成</button>
		</view>
	</view>
</template>

<script>
	import common from "@/libs/login.js"
	import userMixins from '@/libs/userMixins.js'
	export default {
		mixins: [userMixins],
		data() {
			return {
				params: "",
				errMsg: '',
				success: false,
				fail: false
			}
		},
		onLoad(options) {
			console.log(options)
			this.params = JSON.parse(options.params)
		},
		methods: {
			async formSubmit(e) {
				let that = this
				let formData = e.detail.value;
				let params = Object.assign(formData, this.params)
				
				let resp = this.$http.post({
					url: '/auth/wechat/bind',
					data: params
				}).then(() => {
					that.success = true;
				}).catch((err) => {
					that.errMsg = err.errMsg;
					that.fail = true
				})
			},
			async bindSuccess() {
				this.fetchUserInfoAct();
			},
			bindFailed(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msgBtn {
		padding: 50upx;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;

		label {
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20upx;
			}

			input {
				display: inline-block;
				border-bottom: 1px solid #ccc;
				height: 60upx;
				text-align: left;
				flex: 0 1 500upx;
				// text-indent: 100upx;
			}
		}

		button {
			margin: 20upx auto;
		}
	}

	.setIcon {
		image {
			width: 128upx;
			height: 128upx;
			display: block;
			margin: 20upx auto;
		}

		text {
			font-size: 36upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			text-align: center;
			display: block;
			margin: 10upx auto;
		}
	}
</style>
